<template>
  <div id="ConfigMsg">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <div>
        <Subtitle class="sTitle" sTitle="基本信息" />
        <div class="fifty">
          <el-form-item label="事项主题应用名称：" prop="themeName">
            <el-input v-model="ruleForm.themeName"></el-input>
          </el-form-item>
          <el-form-item label="事项主题应用编码：" prop="themeCode">
            <el-input v-model="ruleForm.themeCode"></el-input>
          </el-form-item>
          <el-form-item label="事项主题类型：" prop="themeType">
            <el-select v-model="ruleForm.themeType">
              <el-option
                v-for="item in themeTypeArr"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属地区：" prop="areaCode">
            <el-input v-model="ruleForm.areaCode"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="relation">
        <div class="SubTitle">
          <i class="icon"></i>
          <span>
            关联事项
            <i style="color:red">*</i>
          </span>
          <el-button
            @click="showFrontMatter()"
            icon="el-icon-circle-plus-outline"
            type="primary"
          >添加事项</el-button>
        </div>
        <div class="table-box">
          <el-table
            border
            ref="multipleTable"
            :data="checkedList"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column prop="itemCode" label="事项编码"></el-table-column>
            <el-table-column prop="itemName" label="事项名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="itemDeptName" label="所属部门"></el-table-column>
            <el-table-column prop="statusName" label="事项状态"></el-table-column>
            <el-table-column prop="frontMatter" label="前置事项"></el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button @click="businessAdd('edit',scope.row.id)" type="text" size="small">前置事项</el-button>
                <el-button @click="showDelDialog(scope.$index)" type="text" size="small">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div>
        <Subtitle class="sTitle" sTitle="备注" />
        <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
      </div>
      <el-form-item class="button-box">
        <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
        <el-button>返回</el-button>
      </el-form-item>
    </el-form>
    <!-- 添加事项 -->
    <el-dialog
      id="frontMatterDialog"
      class="sideDialog"
      title="请选择前置事项"
      :visible.sync="frontMatterDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="10">
          <el-input placeholder="请输入事项名称" v-model="addForm.itemName"></el-input>
        </el-col>
        <el-col :span="10">
          <el-input placeholder="请输入事项编码" v-model="addForm.itemCodeProd"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="submitForm('ruleForm')" style="width:100%">搜 索</el-button>
        </el-col>
      </el-row>
      <el-table
        border
        ref="multipleTable"
        :data="frontList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelection"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column prop="itemCode" label="事项编码"></el-table-column>
        <el-table-column prop="itemName" label="事项名称" show-overflow-tooltip></el-table-column>
      </el-table>
      <div class="button-box">
        <el-button type="primary" @click="handleClose">确 认</el-button>
        <el-button @click="handleClose">返回</el-button>
      </div>
    </el-dialog>
    <!-- 移除 -->
    <el-dialog
      class="deleteDialog"
      title="删除"
      :visible.sync="deleteDialog"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <i class="el-icon-warning"></i>此操作将移除该事项，移除后事项的前后关联关系将解除，是否继续？
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmDelete()">确 定</el-button>
        <el-button @click="deleteDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Subtitle from '@/components/common/Subtitle'
export default {
  name:'ConfigMsg',
  components:{ 
    Subtitle
  },
  data(){
    return {
      frontMatterDialog:true,
      deleteDialog:false,
      current:1,
      size:10,
      checkedIndex:0,
      checkedList:[],
      frontList:[],
      themeTypeArr:[],
      addForm:{
        itemName:'',
        itemCodeProd:''
      },
      ruleForm: {
        areaCode:'',
        themeName:'',
        themeCode:'',
        themeType:'',
        // 以上必填
        remarks:''
      },
      rules:{
        themeName: [
          { required: true, message: '请输入事项主题应用名称', trigger: 'click' }
        ],
        themeCode: [
          { required: true, message: '请输入事项主题应用编码', trigger: 'click' }
        ],
        themeType: [
          { required: true, message: '请选择事项主题类型', trigger: 'change' }
        ],
        areaCode: [
          { required: true, message: '请选择所属地区', trigger: 'click' }
        ]
      }
    }
  },
  created(){
    this.getDict('theme_type','themeTypeArr')// 主题应用类型
    this.frontMatterList()
  },
  methods:{
    // 获取字典
    async getDict(type,arrName){
      let res = await this.$get(this.$Api.sysDict+type)
      this[arrName] = res.data.data
    },
    handleClose(){
      this.deleteDialog = false
      this.frontMatterDialog = false
    },
    showFrontMatter(){
      this.frontMatterDialog = true
    },
    // 获取前置事项列表
    frontMatterList(){
      let params = {
        status: '2',// 前置事项的状态（2-所有 启用 的事项）,
        itemName:this.addForm.itemName,
        itemCodeProd:this.addForm.itemCodeProd,
        current:this.current,
        size:this.size
      }
      this.loading = true
      this.$get(this.$Api.frontMatterList, params)
        .then(res => {
          this.loading = false
          if(res.data.statusCode === 200){
            this.frontList = res.data.data.records
            this.current = res.data.data.current
            this.size = res.data.data.size
            this.total = res.data.data.total
          }
        })
    },
    handleSelection(arr){
      this.checkedList = arr
    },
    showDelDialog(index){
      this.checkedIndex = index
      this.deleteDialog = true
    },
    confirmDelete(){
      this.checkedList.splice(this.checkedIndex,1)
      this.deleteDialog = false
    }
  }
}
</script>
<style lang="scss">
#ConfigMsg {
  .sTitle {
    margin-bottom: 20px;
  }
  .SubTitle {
    .el-button {
      height: 28px;
      padding: 0 20px;
      margin-left: 10px;
    }
  }
  .el-form-item {
    display: flex;
    .el-form-item__label {
      width: 180px !important;
    }
    .el-form-item__content {
      flex: 1;
      margin-left: 0 !important;
    }
  }
  .table-box {
    margin: 20px 0 30px;
  }
  .button-box {
    margin-top: 30px;
    text-align: center;
    .el-button {
      margin: 0 20px;
    }
  }
  #frontMatterDialog {
    .el-col-10 {
      padding-right: 10px;
      margin-bottom: 20px;
    }
    .el-table {
      td,
      th {
        height: 40px;
        padding: 8px 0;
      }
    }
  }
}
</style>